<template>
  <div style="height: 100%;background-color:white ;padding: 5px">
    <div>
      <div style="display: inline-block">
        <el-button size="small" icon="el-icon-back" type="text" @click="goBack">返回</el-button>
      </div>
      <div style="display: inline-block">|</div>
      <div style="display: inline-block;">
        <div style="padding-bottom: 15px;margin-left:10px">
          <span style=" font-family: 'Microsoft YaHei',serif;display: inline-block">设置</span>
        </div>
      </div>
      <div style="border-bottom: solid 1px #C9C9C9;"></div>
    </div>
    <div style="margin-top: 10px">
      <el-row>
        <el-col :span=22>
          <label style="margin-left: 10px"> 知识库名称:<span style="color: red">*</span></label>
          <el-input v-model="knowledgeName" size="small" style="width: 150px"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button size="small" type="success" @click="addClick">新增字段</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-table highlight-current-row :data="tableData" :height="tableHeight" border stripe style="width: 100%;">
          <el-table-column label="知识库字段名称" min-width="200" prop="name">
            <template slot-scope="scope">
              <el-input style="width: 150px" v-model="scope.row.name" :disabled="scope.row.nameEnable"
                        @change="((value) => {selectName(value, scope.$index)})">

              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="字段类型" min-width="180" prop="type">
            <template slot-scope="scope">
              <el-select v-model="scope.row.kind" placeholder="请选择" :disabled="scope.row.typeEnable"
                         @change="((value) => {selectType(value, scope.$index)})">
                <el-option
                  v-for="(item,index) in types"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="关联分类" min-width="150" prop="tag">
            <template slot-scope="scope">
              <el-select v-model="scope.row.kindValue" :disabled="scope.row.tagEnable" placeholder="请选择"
                         @change="((value) => {selectTag(value, scope.$index)})">
                <el-option
                  v-for="(item,index) in tags"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="选项" min-width="150" prop="option">
            <template slot-scope="scope">
              <el-select v-model="scope.row.kindValue" :disabled="scope.row.optionEnable" placeholder="请选择"
                         @change="((value) => {selectOption(value, scope.$index)})">
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="是否必填" min-width="150" prop="required">
            <template slot-scope="scope">
              <el-select v-model="scope.row.required" :disabled="scope.row.requiredEnable" placeholder="请选择"
                         @change="((value) => {selectRequired(value, scope.$index)})">
                <el-option
                  v-for="(item,index) in requireds"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="150">
            <template slot-scope="scope">
              <span><el-link type="primary" @click.prevent="add1(scope.$index)">添加</el-link></span>
              <span><el-link type="primary" @click.prevent="update(scope.$index)">编辑</el-link></span>
              <span><el-link type="danger"
                             @click="deleteItem(scope.$index,scope.row.id,scope.row.name)">删除</el-link></span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
    <div style="margin-top: 20px; text-align: right">

      <el-button size="small" type="success" @click="cancel">取消</el-button>
      <el-button size="small" type="success" @click="export1()">导出</el-button>
      <el-button size="small" type="success" @click="confirm()">确定</el-button>

    </div>
  </div>
</template>

<script>
import Label from "../calculator/exportModel/Label";

export default {
  name: "new",
  components: {Label},
  data() {
    return {
      types: [{
        value: 0,
        label: '输入框'
      }, {
        value: 1,
        label: '富文本'
      }, {
        value: 2,
        label: '参照'
      }, {
        value: 3,
        label: '单选下拉框'
      }, {
        value: 4,
        label: '图片'
      }, {
        value: 5,
        label: '多选下拉框'
      }, {
        value: 6,
        label: '文本域'
      }
      ],
      value: '',
      requireds: [{
        value: 0,
        label: '不必填'
      }, {
        value: 1,
        label: '必填'
      }],
      options: [],
      tags: [],
      knowledgeName: '',
      tableData: [],
      tableHeight: 0
    }
  },
  methods: {
    addClick() {
      this.tableData.push({
        name: '',
        kind: '',
        kindValue: '',
        required: '',
        typeEnable: false,
        optionEnable: false,
        tagEnable: false
      })

    },
    //删除按钮
    deleteItem(idx, id, name) {
      if (id == null || id === "") {
        this.tableData.splice(idx, 1)
      } else {
        this.$confirm('是否删除？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.axios.get('/pmph/action/knowledgeLib/deleteById', {
            params: {
              id: id,
              name: name
            }
          }).then((response) => {
            const self = this;
            self.reload();
          })
        })
      }

    },


    selectType(value, index) {
      this.tableData[index].kind = value

      if (this.tableData[index].kind === 0 || this.tableData[index].kind === 1 || this.tableData[index].kind === 4 || this.tableData[index].kind === 6) {
        this.tableData[index].optionEnable = true;
        this.tableData[index].tagEnable = true;
        this.tableData[index].kindValue = '';
      }
      if (this.tableData[index].kind === 2) {
        this.tableData[index].optionEnable = true;
        this.tableData[index].kindValue = '';
        this.tableData[index].tagEnable = false;
      }
      if (this.tableData[index].kind === 3 || this.tableData[index].kind === 5) {
        this.tableData[index].optionEnable = false;
        this.tableData[index].tagEnable = true;
        this.tableData[index].kindValue = '';

      }

    },
    selectTag(value, index) {
      this.tableData[index].kindValue = value

    },
    selectOption(value, index) {
      this.tableData[index].kindValue = value
    },
    selectRequired(value, index) {

      this.tableData[index].required = value

    },
    selectName(value, index) {
      this.tableData[index].name = value
      for (let i = 0; i < this.tableData.length; i++) {
        if (i != 0) {
          if (this.tableData[index - i].name === this.tableData[index].name) {
            this.$message.warning("名称重复请重新填写")
            this.tableData[index].name = '';
            return;
          }
        }
      }

    },
    //添加按钮
    add1: function (val) {
      this.tableData[val].tagEnable = true;
      this.tableData[val].typeEnable = true;
      this.tableData[val].optionEnable = true;
      this.tableData[val].nameEnable = true;
      this.tableData[val].requiredEnable = true;

    },
    //编辑按钮
    update: function (val) {
      this.tableData[val].tagEnable = false;
      this.tableData[val].typeEnable = false;
      this.tableData[val].optionEnable = false;
      this.tableData[val].nameEnable = false;
      this.tableData[val].requiredEnable = false;

    },
    //取消按钮
    cancel() {
      false;
    },

    add: function (val) {

    },
    //确定按钮点击
    confirm: function () {

      if (this.knowledgeName === '' || this.knowledgeName === null) {
        this.$message.warning("请填写知识库名称")
        return;
      }
      let tableData = [];
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].name === '' || this.tableData[i].name === null) {
          this.$message.warning("请填写名称")
          return;
        }
        if (this.tableData[i].kind === '2') {
          if (this.tableData[i].kindValue === '') {
            this.$message.warning("请填写参照类型对应的关联分类")
            return;
          }
        }
        if (this.tableData[i].kind === '3' || this.tableData[i].kind === '5') {
          if (this.tableData[i].kindValue === '') {
            this.$message.warning("请填写对应的选项")
            return;
          }
        }
        if (this.tableData[i].kind === '') {
          this.$message.warning("请选择字段类型")
          return;
        }
      }

      let param = new URLSearchParams();
      param.append("knowledgeName", this.knowledgeName)
      param.append("tableData", JSON.stringify(this.tableData))
      param.append("id", this.$route.query.id)

      this.axios.post('/pmph/action/knowledgeLib/editAdd', param)
        .then((response) => {

            this.$router.push("/KnowledgeLib")
        })
    },
    //导入按钮点击
    export1: function () {
      window.location.href = '/pmph/action/knowledgeLib/export?tableData=' + JSON.stringify(this.tableData) + '&knowledgeName=' + this.knowledgeName
    },
    //返回按钮点击事件
    goBack: function () {
      this.$router.push("/KnowledgeLib")
    },
  },

  mounted: function () {
    this.axios.get('/pmph/action/knowledgeLib/selectTableData', {
      params: {
        id: this.$route.query.id
      }
    }).then((response) => {
      for (let i = 0; i < response.data.length; i++) {
        response.data[i].typeEnable = true
        response.data[i].tagEnable = true
        response.data[i].optionEnable = true
        response.data[i].nameEnable = true
        response.data[i].requiredEnable = true
      }
      this.tableData = response.data;
    })

    // 获取分类数据
    this.axios.get("/pmph/action/knowledgeLib/selectTagData", {
      params: {
        id: this.$route.query.id
      }
    })
      .then((response) => {
        this.tags = response.data
        console.log(this.tags)
      })
      .catch((error) => {
        this.$message.error("获取分类数据失败")
      })


    // 获取选项数据
    this.axios.get("/pmph/action/knowledgeLib/selectRuleData", {})
      .then((response) => {
        this.options = response.data
        console.log(this.tags)
      })
      .catch((error) => {
        this.$message.error("获取选项数据失败")
      })
    // 获取知识名称数据
    this.knowledgeName = this.$route.query.name
    // this.axios.get("/pmph/action/knowledgeLib/getKnowledgeName", {})
    //   .then((response) => {
    //     console.log(response)
    //     this.knowledgeName = response.data.name
    //
    //   })
    //   .catch((error) => {
    //     this.$message.error("获取名称失败")
    //   })
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 180
  }
}
</script>

<style scoped>

</style>
